<template>
    <ul>
        <li>
            <span>编号</span>
            <span>姓名</span>
            <span>联系方式</span>
            <span>状态</span>
            <span>操作</span>
        </li>
        <li v-for="item in list" :key="item.id">
            <span>{{item.id}}</span>
            <span>{{item.name}}</span>
            <span>{{item.tel}}</span>
            <span>
                <!-- <b slot="state">在职</b> 在运行时相当于这个元素在这儿 -->
                <!-- 父组件中传递的 VNode 没添加 slot 属性 都会被放到default 默认插槽中 -->
                <slot :item="item" :userName="item.name" :state="item.state" name="state"/>
            </span>
            <span>
                <!-- <slot/>相当于一个占位符，通过  父组件   传递进来的html片段  然后被放在这里 -->
                <slot name="handle" :state="item.state" :id="item.id" :item="item"/>
            </span>
        </li>
    </ul>
</template>

<script>
    export default{
        props:{
            list:{
                type:Array,
                default:()=>[]
            }
        }
    }
</script>

<style scoped>
     li{
         display: flex;
         text-align: center;
         justify-content: space-evenly;
         border-bottom: 1px solid;
     }
     li>*{
         flex: 1;
         margin: 0 30px;
         padding: 5px 7px;
         display: inline-block;
     }
</style>